<template>
<div class="layout-app">
	<!-- 悬浮按钮 -->
	<div v-if="isMinimized" class="minimized-button" @click="restoreDialog">
	  <i class="el-icon-message"></i>
	</div>
	<!-- main -->
	<el-dialog :title="nameTitle" :visible.sync="addDialogVisible" width="58%" v-dialogDrag 
	:before-close="handleClose" :modal="false"
	:close-on-click-modal="false"
	custom-class="minimizable-dialog">
	<!-- 新增 -->
	<div class="addAcc" ref='myBox' v-if="!isMinimized"
	v-loading="loading"
	element-loading-text="正在添加至数据明细表..."
	element-loading-spinner="el-icon-load"
	element-loading-background="rgba(0, 0, 0, 0.8)">
		<!-- tabs -->
		<div class="tabs">
			<div class="tabsMain">
				<!-- 表单 header -->
				<div class="headerForm">
					<el-form ref="addForm" :rules="addFormRules" :model="addForm" size="mini" label-width="88px">
						<el-row :gutter="40">
							<el-col :xs="val.xs" :sm="val.xs" :md="val.md" :lg="val.lg" :xl="val.xl" v-for="(val,i) in formType" :key="i">
								<!-- input -->
								<el-form-item v-if="val.type == 'input'" :label="val.label" :prop="val.modelValue">
									<el-input :suffix-icon='val.prefix' v-model="$data.addForm[val.modelValue]" :placeholder="val.placeholder" :disabled="val.disabled" ></el-input>
								</el-form-item>
								<!-- textarea -->
								<el-form-item v-if="val.type == 'textarea'" :label="val.label" :prop="val.modelValue">
									<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="$data.addForm[val.modelValue]"></el-input>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="val.type == 'select'" :label="val.label" :prop="val.modelValue">
									<el-select v-model="$data.addForm[val.modelValue]" filterable placeholder="请选择" @focus="sname(val,i)"
									@change="handleChange" :disabled="val.disabled">
										<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id"> 
										<span style="color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
									</el-select>
								</el-form-item>
								<!-- date -->
								<el-form-item v-if="val.type == 'date'" :label="val.label" :prop="val.modelValue">
									<el-date-picker
									:picker-options="pickerOptions" :disabled="val.disabled ? true : false"
									 value-format="yyyy-MM-dd"
									type="date" placeholder="选择日期" v-model="$data.addForm[val.modelValue]">
									</el-date-picker>
								</el-form-item>
								<!-- btn -->
								<el-form-item v-if="val.type == 'btn'">
									<el-button type="primary" plain @click="clickEvents(val,i)">{{ val.label }}</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- 表单数据！第二层取addForm下的list -->
				<div class="mainForm">
					<el-form ref="addMainForm" :rules="addMainFormRules" :model="addMainForm" label-width="82px" size="mini">
						<el-row :gutter="8">
							<el-col :xs="val.xs" :sm="val.xs" :md="val.md" :lg="val.lg" :xl="val.xl" type="flex" v-for="(val,i) in formMainType" :key="i">
								<!-- select one -->
								<el-form-item v-if="val.type == 'selectName'" :label="val.label" :prop="val.modelValue">
									<el-select v-model="$data.addMainForm[val.modelValue]" :disabled="val.disabled ? disabled : val.disabled" filterable
									@focus="handlefoucs(val,i)" @change="handleChangeDrug" :filter-method="searchMethod" :popper-append-to-body="false">
											<el-group>
											  <!-- 固定头部 -->
											  <div class="select-header" slot="header"
											    style="font-size: 12px;font-weight: bold;display: flex;justify-content: space-around;padding: 8px;text-align: left;
											    position: sticky;top:0;z-index: 10;background-color: #f1f1f1;">
											    <span style="text-align:center;">库存序号</span>
											    <span>药品名称</span>
											    <span>药品规格</span>
												<span>库存数量</span>
											    <span>批次号</span>
												<span>生产厂家</span>
											  </div>
											  
											  <!-- 选项内容 -->
											  <el-option 
											    v-for="item in filteredNameOption" 
											    :key="item.id" 
											    :label="item.label" 
											    :value="item.id"
											    :disabled="item.disabled"> 
											    <div id="optionItem">
											      <span style="text-align:center;">{{ item.id }}</span>
											      <span>{{ item.drugName }}</span>
											      <el-tooltip class="item" effect="light" :content="item.drugSpec" placement="top">
											        <span>{{ item.drugSpec }}</span>
											      </el-tooltip>
											      <span>{{ item.purcCnt }}</span>
											      <span>{{ item.manuLotnum }}</span>
												  <span>{{ item.prodentpName }}</span>
											    </div>
											  </el-option>
											</el-group>
									</el-select>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="val.type == 'select'" :label="val.label" :prop="val.modelValue">
									<el-select v-model="$data.addMainForm[val.modelValue]" :disabled="val.disabled ? disabled : val.disabled" filterable>
										<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id">
											<span style="font-size: 12px">{{ item.label }}</span></el-option>
										</el-option>
									</el-select>
								</el-form-item>
								<!-- input 数量 -->
								<el-form-item v-if="val.type == 'inputNum'" :label="val.label" :prop="val.modelValue">
									<el-input placeholder="" v-model="$data.addMainForm[val.modelValue]" class="input-with-select">
									  <el-select v-model="purcType" slot="prepend" @change="SelectedPurcType" placeholder="库存类型">
									    <el-option label="最小单位" value="1"></el-option>
									    <el-option label="包装单位" value="2"></el-option>
									  </el-select>
									  <span slot="append" icon="el-icon-search">{{ purcType == 1 ? minUnt : unt }}</span>
									</el-input>
								</el-form-item>
								<!-- input -->
								<el-form-item v-if="val.type == 'input'" :label="val.label" :prop="val.modelValue">
									<el-input :suffix-icon='val.prefix' v-model="$data.addMainForm[val.modelValue]" 
									:disabled="val.disabled"></el-input>
								</el-form-item>
								<!-- tag -->
								<el-form-item v-if="val.type == 'tag'" style="margin-left: -68px;">
									<el-tag size="small">{{ MarkUp }}</el-tag>
								</el-form-item>
								<!-- textarea -->
								<el-form-item v-if="val.type == 'textarea'" :label="val.label" :prop="val.modelValue">
									<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="$data.addMainForm[val.modelValue]"
									:disabled="val.disabled"></el-input>
								</el-form-item>
								<!-- date -->
								<el-form-item v-if="val.type == 'date'" :label="val.label" :prop="val.modelValue">
									<el-date-picker class="autoWidth" :picker-options="pickerOptions" @focus="dateChoose(i)"
									type="date" placeholder="选择日期" v-model="$data.addMainForm[val.modelValue]">
									</el-date-picker>
								</el-form-item>
								<!-- btn -->
								<el-form-item v-if="val.type == 'btn'">
								    <el-button type="primary" plain @click="clickEvents(val,i)">{{ val.label }}</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- table -->
				<div class="table">
					<el-table :data="tableData" border 
					:style="{ width: tableWidth + 'px' }"
					:cell-class-name="tableCellClassName" 
					@row-dblclick="dbclick" 
					>
					<!-- 在el-table-column中添加可编辑列 -->
					<el-table-column prop="apllyAmt" label="调拨数量" width="88">
					  <template slot-scope="scope">
					    <el-input size="mini"
						  style="width: 100%;"
						  v-if="scope.row.editing"
						  v-model.number="scope.row.apllyAmt"
						  @input="handleInputChange(scope.row)"
						  placeholder="请输入"/>
					    <span v-else>{{ scope.row.apllyAmt }}</span>
					  </template>
					</el-table-column>
					<el-table-column prop="pacUnt" label="调拨单位" width="88">
					  <template slot-scope="{ row }">
					    <el-tag>{{ row.purcType == 1 ? row.dosUnt : row.pacUnt }}</el-tag>
					  </template>
					</el-table-column>
					<el-table-column prop="purcType" label="库存类型">
						 <template slot-scope="{ row }">
							<span :style="{ color: purcTypeColorMap[row.purcType] }">{{ purcTypeMap[row.purcType] || '未知' }}</span>
						</template>
					</el-table-column>
						<!-- 字段映射 -->
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- fixed -->
						<el-table-column
						  fixed="left" 
						  label="行号" 
						  width="68" 
						  align="center">
						  <template slot-scope="scope">
						    {{ scope.$index + 1 }}
						  </template>
						</el-table-column>
						<!-- edit -->
						<el-table-column fixed="right" label="操作" width="148">
						    <template slot-scope="scope">
						      <div class="editbox" style="text-align: center;">
						        <template v-if="!scope.row.editing">
						          <el-button type="primary" @click="startEditing(scope.row)" size="mini">编辑</el-button>
						          <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)" size="mini">删除</el-button>
						        </template>
						        <template v-else>
						          <el-button type="success" @click="saveEdit(scope.row)" size="mini">完成</el-button>
						          <el-button type="info" @click="cancelEdit(scope.row)" size="mini">取消</el-button>
						        </template>
						      </div>
						    </template>
						  </el-table-column>
					</el-table>
					<div class="total">
					    <span>成本合计：</span><el-input v-model="cbValue" style="width: 88px;" size="mini" :disabled='totaldisabled'></el-input>
					    <span style="margin-left: 12px;">零售合计：</span><el-input v-model="lsValue" style="width: 88px;" size="mini" :disabled='totaldisabled'></el-input>
					</div>
				</div>
			</div>
		</div>
		  <div slot="footer" class="dialog-footer" v-if="isAdd === true">
			<el-button size="mini" type="info" plain @click="draftSubmit">存为草稿</el-button>
			<el-button size="mini" plain @click="minimizeDialog">最小化</el-button>
		  </div>
		  <div slot="footer" class="dialog-footer" v-if="isEdit === true">
			<el-button size="mini" type="info" plain @click="draftEditSubmit">草稿保存</el-button>
			<el-button size="mini" plain @click="minimizeDialog">最小化</el-button>
		  </div>
	</div>
	</el-dialog>
	<!-- 内层Model -->
	<div class="innerModel">
		
	</div>

</div>
</template>

<script>
// self
import AccType from './addAllocateType.js'
import AccMainType from './addAllocateMainType.js'
import addForm from './addForm.js' //Form表单
// prop

// ext
import { getLunar } from 'chinese-lunar-calendar'

// 接口
import { findAttribute,purcRetnSelectDrug,getDocMark,addpurctcmallocate,dpurctcmallocateJoin,getDpurctcmallocate,editpurctcmallocate } from "@/api/systemCatalogue/traMedici.js";
import { selectDropDownList } from "@/api/systemCatalogue/traMedici.js";
export default {
	components:{
		
	},
	props: ['parentMethod'],
	data(){
		//表单校验取大于0的数字型数据
		var validatePercentage = (rule, value, callback) => { 
			if(value == ''){
				return callback(new Error('不能为空！'));  
			}else{
				// 使用正则表达式验证大于 0 的正整数
				const regex = /^[1-9]\d*$/; 
				if (!regex.test(value)) {
					return callback(new Error('数量无效！'));
				}
			}
		  callback();
		};
		return{
			//str
			tableWidth:'', //右侧表格动态宽度
			value:'',
			getMinMax:0,
			saleAmt:'', // 销售金额
			packNum:'', 
			cbValue:'',
			lsValue:'',
			purcType:'2', // 库存类型 = > 判断大小单位 0最小单位,1包装单位
			dialogTitle:'新增中药调拨',
			unt:'', // 包装单位 （数量：盒？包？g?）
			minUnt:'', // 最小单位 （数量：盒？包？g?）
			inputSearchValue:'',
			nameTitle:'新建调拨单【中药】',
			deptCode:'',
			getLunarDay: '',
			drugName:'',
			appId:'', // * 选择采购计划时的Id
			startDate:'', // * 开始时间
			endDate:'', // * 结束时间
			currentCell: null, // 单元格隐藏
			year: new Date().getFullYear(),
			month: new Date().getMonth() + 1,
			date: new Date().getDate(),
			lunarDate: '',//农历
			// 1 - 3
			firstName:'',
			seconedName:'',
			thirdName:'',
			auditStatus:'5',
			currentRow: null, //单选高亮
			//num
			MarkUp:0, // 加成率
			KcNum:0, // 当前库存数量
			pageNum: 1, //当前页currentPage
			pageSize: 6,
			totalSize: 10, //总条数
			//ble
			isAdd:false,
			isEdit:false,
			loading:false,
			disabled:true,
			totaldisabled:true,
			isMinimized: false,
			addghdwDialog:false,
			selectDisabled:true,
			addDialogVisible: false, //新增采购入库model
			dialogFormVisible:false,
			innerVisible:false, //内层Model选择采购计划
			//arr
			formType:[], // 表单头部内容
			formMainType:[], // 表单主体内容
			tableData:[],
			tableRows:[
				{ name:"药品名称", prop:"drugName" }, {name:"规格描述", prop:"drugSpec" },
				{ name:"成本单价", prop:"retnPric", type:"" },{ name:"成本金额", prop:"retnAmt", type:"" },
				{ name:"零售单价", prop:"salePric", type:"" },{ name:"零售金额", prop:"saleAmt", type:"" },
				{ name:"生产厂家", prop:"prodentpName" },{ name:"库存数量", prop:"purcCnt" },
				{ name:"生产批号", prop:"manuLotnum", type:"" },
			],
			innertableData:[], //内层采购计划数据源
			currentObj:{}, //内层采购计划数据源 = > 单击选择
			currentTable: [],//表格单选
			selectOption:[{id:2,label:'中药库'}],// 库房
			ksOption:[{id:4,label:'中药房'}],// 科室 收货库房
			kcOptions:[{id:1,label:'最小单位',value:'最小单位'},{id:2,label:'包装单位',value:'包装单位'}], // 库存类型
			ghdwOption:[
				{id:1,label:'水富市人民医院',value:'水富市人民医院'},{id:2,label:'昆明灵泽科技有限公司',value:'昆明灵泽科技有限公司'},
			],
			// 加成方式
			MarkOption:[
				{ id:1,label:'不加成',value:'不加成'},{ id:2,label:'固定加成',value:'固定加成'},
				{ id:3,label:'比例加成',value:'比例加成'},{ id:4,label:'手工比例加成',value:'手工比例加成'}
			],
			invyOption:[], // 库存序号
			// 表单验证规则 header
			addFormRules:{
				shedId: [{ required: true, message: '库房为必填项！', trigger: 'change' }],
				phayId: [{ required: true, message: '科室为必填项！', trigger: 'change' }],
				supplyCandidateId: [{ required: true, message: '请选择供货单位！', trigger: 'change' }],
			},
			purcTypeMap:{
				1: '最小单位',
				2: '包装单位',
			},
			purcTypeColorMap: {
				1: '#67C23A',
				2: '#409EFF',
			},
			// 表单验证规则 main
			addMainFormRules:{
				drugId: [{ required: true, message: '请先选择药品信息！', trigger: 'change' }],
				purcType: [{ required: true, message: '此项为必填项！', trigger: 'change' }],
				apllyAmt: [
					{ required: true, message: '调拨的数量为必填项！', trigger: 'blur' },
					{ 
					  validator: (rule, value, callback) => {
						// 验证是否为非0正整数
						if (!/^[1-9][0-9]*$/.test(value)) {
						  callback(new Error('调拨的数量为非0正整数!'));
						} 
						// 验证是否选择了库存类型
						else if (this.addMainForm.purcType == '') {
						  callback(new Error('请先选择库存类型!'));
						} else {
						  callback();
						}
					  },
					  trigger: 'blur'
					}
				],
			},
			// 单据状态 0 草稿,1 回退提交,2 已提交,3 回退审核,4 已审核,5 已过单,6 已作废'
			statusOption:[
				{id:0,label:'草稿'},{id:1,label:'回退提交'},{id:2,label:'已提交'},{id:3,label:'回退审核'},{id:4,label:'已审核'},{id:5,label:'已过单'},{id:6,label:'已作废'},
			],
			sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
			marryiedOptions:[{id:1,label:'未婚',value:'未婚'},{id:2,label:'已婚',value:'已婚'},{id:3,label:'离异',value:'离异'},{id:4,label:'丧偶',value:'丧偶'},{id:5,label:'再婚',value:'再婚'}],
			nameOption:[],
			
			//obj
			addForm:{}, // form表单 * 
			addMainForm:{}, // form主体表单 * addForm.list
			lists:{},
			options:[],
			ssrOption:[],
			gysOption:[],
			ManufacturerOptions:[],
			//props
			pickerOptions: {
				disabledDate(time) { return time.getTime() > Date.now() },
				shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					{ text: '最近一个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', date);}},
					{ text: '最近三个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', date);}},
					{ text: '半年前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 180);picker.$emit('pick', date);}},
					{ text: '去年',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 360);picker.$emit('pick', date);}},
				]
			},
			manuDatePickerOptions: {
				disabledDate(time) { return time.getTime() > Date.now() },
				shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					{ text: '最近一个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', date);}},
					{ text: '最近三个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', date);}},
					{ text: '半年前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 180);picker.$emit('pick', date);}},
					{ text: '去年',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 360);picker.$emit('pick', date);}},
				]
			},
			expyDatePickerOptions: {
				disabledDate(time) { return time.getTime() < Date.now() },
				shortcuts: [
					{ text: '三个月后',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 90);picker.$emit('pick', date);}},
					{ text: '半年后',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 180);picker.$emit('pick', date);}},
					{ text: '明年',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 360);picker.$emit('pick', date);}},
					{ text: '后年',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 720);picker.$emit('pick', date);}},
					{ text: '三年后',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 360 * 3);picker.$emit('pick', date);}},
					{ text: '五年后',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 360 * 5);picker.$emit('pick', date);}},
					{ text: '十年后',onClick(picker) {const date = new Date();date.setTime(date.getTime() + 3600 * 1000 * 24 * 360 * 10);picker.$emit('pick', date);}},
				]
			},
		}
	},
	// 在data中添加一个计算属性来过滤nameOption
	// 修改后的computed属性
	computed: {
	    filteredNameOption() {
	        // 获取表格中所有的药品ID和厂家ID组合
	        const existingDrugs = this.tableData.map(item => ({
	            drugId: item.drugId,
	            prodentpNameId: item.prodentpNameId
	        }));
	        
	        // 过滤nameOption，禁用已存在的药品
	        return this.nameOption.map(item => {
	            const isDisabled = existingDrugs.some(drug => 
	                drug.drugId === item.drugId && 
	                drug.prodentpNameId === item.prodentpNameId
	            );
	            
	            return {
	                ...item,
	                disabled: isDisabled
	            };
	        });
	    }
	},
	created() {
		
	},
	mounted() {
		this.initFormData(); // 初始化表单数据
		// 获取接口参数
		this.getAddForm();
		this.getProData();
		this.getGys();
		// 获取制单人 => 当前登录用户
		this.addForm.createId = JSON.parse(localStorage.getItem('userInfo')).userId;
		// 获取终端序号 => 当前登录用户
		this.addForm.terminalId = localStorage.getItem('terminalId');
		// 赋值业务日期
		this.addForm.busDate = new Intl.DateTimeFormat('zh-CN').format(new Date()).replace(/\//g, '-');
	},
	methods:{
		
		// 
		async loadData(){
			
		},
		/* 入库药品数据源 */
		/* 入库药品数据源 */
		async getProData() {
		  let res = await purcRetnSelectDrug({
		    pageNum: this.pageNum,
		    pageSize: this.pageSize,
		    drugName: this.drugName
		  });
		  
		  if (res.code === 200) {
		    // 按照 drugName 进行排序
		    const sortedData = res.data.content.sort((a, b) => {
		      // 如果 drugName 相同，可以按照其他字段排序（如 drugId）
		      if (a.drugName === b.drugName) {
		        return a.drugId - b.drugId;
		      }
		      // 否则按照 drugName 升序排序
		      return a.drugName.localeCompare(b.drugName);
		    });
		    
		    // 将排序后的数据赋值给 nameOption
		    this.nameOption = sortedData.map(obj => ({
		      label: obj.drugName,
		      ...obj
		    }));
		  } else {
		    this.$message.error(res.message);
		  }
		},
		/* props => 生产厂家模糊查询 */
		searchMethod(query, option) {
			console.log(query);
			if(query){
				console.log(query,'再调一次接口查询');
				this.inputSearchValue = query
				this.pageNum = 1
				this.pageSize = 10
				this.drugName = query
				this.getProData();
			}else{
				console.log('buzou');
			}
		},
		async getGys(){
			// 供应商下拉列表
			let rs = await selectDropDownList();
			this.gysOption = rs.data.content.map(obj => {
			  // 将 name 替换为 label，并保留其他字段
			  return { label: obj.supplierName , ...obj };
			});
		},
		// 获取药品加成率
		async getMarkUp(){
			let res = await getDocMark({
				drugType: 9,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			});
			this.addMainForm.markUpId = res.data.content[0].markUpType
			this.MarkUp = res.data.content[0].markUpRate
			this.addMainForm.salePric = (this.MarkUp * this.addMainForm.purcPric).toFixed(2); // 余数四舍五入取最后两位
		},
		// select聚焦
		async handlefoucs(val,i){
			this.idx = i;
			console.log(i);
			switch (i) {
				case 0: // 药典名称
					// this.getProData();
				break;
			}
		},
		// 表格单选 => getPlan
		handleCurrentTableChange(val){
			if(val.state != 5){
				this.setCurrent();
				this.$message({ type: 'error', message: '只能选择已过单数据!'});
			}else{
				// 赋id
				this.appId = val.id
				this.currentTable = val
				this.$message({ type: 'success', message: '已选择:' + this.appId + '的采购计划数据'});
			}
		},
		// 调用接口查询是否可加入
		async isJoined() {
		  // 检查是否已存在相同药品ID
		  const exists = this.tableData.some(item => item.drugId === this.addMainForm.drugId);
		  if (exists) {
		    this.$message.error('该药品已存在于列表中！');
		    // 获取表格中所有的drugId
		    const existingDrugIds = this.tableData.map(item => item.drugId);
		    // 过滤掉已经存在于表格中的药品
		    return this.nameOption.filter(item => !existingDrugIds.includes(item.id));
		  }
		  
		  // 根据purcType设置单位
		  this.addForm.unt = this.purcType == 1 ? this.minUnt : this.unt;
		  
		  let reslut = await dpurctcmallocateJoin({ 
		    amount: this.addMainForm.apllyAmt,
		    invyId: this.addMainForm.invyId,
		    pacCnt: this.packNum,
		    purcType: this.purcType
		  });
		  
		  if(reslut.code === 200) {
		    console.log(reslut.data,'处理返回的数据处理返回的数据处理返回的数据');
		    this.loading = true;
		    setTimeout(() => {
		      // 处理返回的数据，计算金额
		      const processedData = reslut.data.map(item => ({
		        ...item,
		        purcPric: item.retnPric,
		        saleAmt: item.salePric * item.apllyAmt,
		        retnAmt: item.retnPric * item.apllyAmt,
		        // 添加单位信息
		        unt: this.addForm.unt,
		        dosUnt: this.minUnt,
		        pacUnt: this.unt
		      }));
		      
		      if(this.tableData.length === 0) {
		        // 如果表格为空，直接赋值
		        this.tableData = processedData;
		      } else {
		        // 如果表格不为空，直接添加新数据
		        this.tableData = [...this.tableData, ...processedData];
		      }
		      
		      // 计算总金额
		      this.cbValue = this.tableData.reduce((sum, item) => sum + item.retnAmt, 0);
		      this.lsValue = this.tableData.reduce((sum, item) => sum + item.saleAmt, 0);
		      
		      // 更新表单中的总金额
		      this.addForm.costAmt = this.cbValue;
		      this.addForm.saleAmt = this.lsValue;
		      
		      this.$message.success('已添加！');
		      this.loading = false;
		    }, 888);
		    this.$refs['addMainForm'].resetFields();
		  } else {
		    this.$message.error(reslut.message);
		  }
		},

		// 库存类型选择
		SelectedPurcType(val) {
		  this.addMainForm.purcType = val;
		  // 根据选择的类型更新单位显示
		  if(val == 1) {
		    this.minUnt = this.addForm.dosUnt; // 最小单位
		  } else {
		    this.unt = this.addForm.pacUnt; // 包装单位
		  }
		  console.log('当前库存类型:', val, '单位:', val == 1 ? this.minUnt : this.unt);
		},
		// 取消高亮
		setCurrent(row) {
		    this.$refs.singleTable.setCurrentRow(row);
		},
		// 表单头部聚焦事件 => addForm
		async sname(val,i) {
			// val.id = i;
			this.idx = i;
			console.log(i);
			// i event
			switch (i) {
				case 3:
					// 科室档案
					// let rs = await findAttribute()
					// this.ksOption = rs.data.map(obj => {
					//   // 将 name 替换为 label，并保留其他字段
					//   return { label: obj.deptName , ...obj };
					// });
				break;
			}
		},
		handleInputPacCut(v,i){
			this.idx = i;
			console.log(i);
			// i event
			switch (i) {
				case 7:
				let purcCntRule = /^[1-9]\d*$/;
				if(!purcCntRule.test(this.addMainForm.purcCnt)){
					this.$message({ type: 'error', message: '请输入正确的调拨数量，请注意格式!'});
				}else{
					this.getMarkUpPric();
					this.getPageListCheck(); // 检测库存是否充足
				}
				break;
			}
		},
		// 新增方法：过滤nameOption，移除已存在的药品
		filterNameOption() {
		  const existingDrugIds = this.tableData.map(item => item.drugId);
		  this.nameOption = this.nameOption.filter(item => !existingDrugIds.includes(item.drugId));
		},
		
		// 计算总金额的方法
		calculateTotals() {
		  // 确保tableData是数组
		  if (!Array.isArray(this.tableData)) {
			this.tableData = [];
		  }
		  
		  // 计算成本合计和零售合计
		  this.cbValue = this.tableData.reduce((sum, item) => {
			const amount = parseFloat(item.apllyAmt) || 0;
			const purcPrice = parseFloat(item.purcPric) || 0;
			return sum + (purcPrice * amount);
		  }, 0).toFixed(2);
		  
		  this.lsValue = this.tableData.reduce((sum, item) => {
			const amount = parseFloat(item.apllyAmt) || 0;
			const salePrice = parseFloat(item.salePric) || 0;
			return sum + (salePrice * amount);
		  }, 0).toFixed(2);
		  
		  // 更新表单中的总金额
		  this.addForm.costAmt = this.cbValue;
		  this.addForm.saleAmt = this.lsValue;
		},
		
		// 修改getTotalAmt方法
		getTotalAmt(reslut) {
		  // 使用新的calculateTotals方法
		  this.calculateTotals();
		},
		// 修改后的clickEvents方法
		async clickEvents(val, i) {
		    this.idx = i;
			console.log(val,i,'ooooooooooooooooooooooo');
		    switch (i) {
		        case 8:
		            // 触发验证表单
		            this.$refs.addMainForm.validate(async (valid) => {
		                if (valid) {
		                    console.log(this.addMainForm, '点击加入');
		                    this.isJoined();
		                }
		            });
		            break;
		    }
		},
		
		// 新增方法：直接添加数据到表格
		directAddToTable() {
		    // 检查是否已存在相同药品ID
		    const exists = this.tableData.some(item => 
		        item.drugId === this.addMainForm.drugId && 
		        item.prodentpNameId === this.addMainForm.prodentpNameId
		    );
		    
		    if (exists) {
		        this.$message.error('该药品已存在于列表中！');
		        return;
		    }
		    
		    this.loading = true;
		    try {
		        // 创建新药品对象
		        const newDrug = {
		            ...this.addMainForm,
		            apllyAmt: this.addMainForm.apllyAmt,
		            purcAmt: this.addMainForm.purcPric * this.addMainForm.purcCnt,
		            saleAmt: this.addMainForm.salePric * this.addMainForm.purcCnt,
		            name: this.addMainForm.label || this.addMainForm.drugName,
		            drugSpec: this.addMainForm.drugSpec,
		            prodentpName: this.addMainForm.prodentpName,
		            manuLotnum: this.addMainForm.manuLotnum,
		            purcCnt: this.KcNum, // 库存数量
					pacCnt: this.addMainForm.pacCnt,
		            purcType: this.purcType,
		            editing: false
		        };
		        
		        // 添加到表格数据
		        this.tableData = [...this.tableData, newDrug];
		        
		        // 计算总金额
		        this.calculateTotals();
		        
		        this.$message.success('已添加！');
		        this.$refs['addMainForm'].resetFields();
		    } finally {
		        this.loading = false;
		    }
		},
		// 查看单据数据
		watchData(){
			this.$message({type: 'waring',message: '正在开发中...' });
		},
		// 日期选择
		dateChoose(i){
			console.log(i);
			switch(i){
				// 生产日期
				case 13:
					this.pickerOptions = this.manuDatePickerOptions
				break;
				// 有效日期
				case 14:
					this.pickerOptions = this.expyDatePickerOptions
				break;
			}
		},
		// 开始时间变化值
		// startDateHandle(value){ if (value) {this.startDate = this.formatDate(value)}},
		// 结束时间变化值
		// endDateHandle(value){ if (value) {this.endDate = this.formatDate(value)}},
		// SelectVal to editForm
		handleChange(val){
			console.log(val);
			if(val){
				this.disabled = false
			}
			// i event
		},
		// 库存序号判断
		async getPageListCheck(){
			if(this.addMainForm.drugId == ''){
				this.$message({ type: 'error', message: '请先选择正确的药品信息!'});
			}else if(this.addMainForm.prodentpNameId == ''){
				this.$message({ type: 'error', message: '关联的厂家序号错误，请重试。'});
			}else if(this.addMainForm.purcCnt > this.KcNum){
				// this.$message({ type: 'error', message: '调拨数量不能大于当前库存数量！【当前库存数量】：'+this.KcNum});
				this.$confirm('调拨数量不能大于【当前库存数量】！', '提示', {
						  confirmButtonText: 'OK',
						  cancelButtonText: '取消',
						  type: 'warning'
						}).then(() => {}).catch(() => {
						  this.$message({ type: 'info', message: '已取消'});          
						});
				this.addMainForm.purcCnt = 1;
			}
		},
		
		// 新增方法：初始化表单数据
		    initFormData() {
		      // 初始化主表单数据
		      this.addForm = {
		        ...addForm.map(v => v)[0],
		        createId: JSON.parse(localStorage.getItem('userInfo')).userId,
		        terminalId: localStorage.getItem('terminalId'),
		        busDate: new Intl.DateTimeFormat('zh-CN').format(new Date()).replace(/\//g, '-'),
		        state: '',
		        detailsVOS: [],
		        costAmt: 0,
		        saleAmt: 0,
		        id: null
		      };
		      
		      // 初始化明细表单数据
		      this.addMainForm = {
		        purcType: '2',
		        apllyAmt: '',
		        drugId: '',
		        invyId: '',
		        purcCnt: '',
		        // 其他需要初始化的字段...
		      };
		      
		      // 初始化其他相关数据
		      this.tableData = [];
		      this.cbValue = '';
		      this.lsValue = '';
		      this.purcType = '2';
		    },
			
		// 选择药品 修改handleChangeDrug方法，确保正确设置药品信息
		handleChangeDrug(val) {
		  let drugrs = this.nameOption.find(name => name.id === val)
		  console.log(drugrs);
		  this.getMinMax = drugrs.pacCnt // 大小单位转换
		  this.addMainForm.drugId = drugrs.id // 确保设置drugId
		  this.addMainForm.label = drugrs.drugName
		  this.addMainForm.purcCnt = drugrs.purcCnt
		  this.addMainForm.drugCode = drugrs.drugCode
		  this.addMainForm.invyId = drugrs.invyId
		  this.addMainForm.invId = drugrs.invyId
		  this.addMainForm.manuLotnum = drugrs.manuLotnum
		  this.addMainForm.drugSpec = drugrs.drugSpec
		  this.addMainForm.retnPric = drugrs.retnPric
		  this.KcNum = drugrs.purcCnt // 库存数量
		  this.unt = drugrs.pacUnt // 包装单位
		  this.purcType = this.addMainForm.purcType = String(drugrs.purcType);
		  this.minUnt = drugrs.dosUnt // 最小单位
		  this.addMainForm.salePric = drugrs.salePric
		  this.dosUnt = this.addMainForm.unt = drugrs.unt
		  this.addMainForm.prodentpName = drugrs.prodentpName
		  this.addMainForm.prodentpId = drugrs.prodentpNameId // 确保设置厂家ID
		  this.addMainForm.pacCnt = this.packNum = drugrs.pacCnt // 包装数量
		  
		  // 根据当前选择的purcType设置单位
		  this.addForm.unt = this.purcType == 1 ? this.minUnt : this.unt;
		},
		
		// 直接计算销售金
		getMarkUpPric(drugInfos){
			this.addForm.costAmt = this.addMainForm.purcPric * Number(this.addMainForm.purcCnt)	 // 成本金额
			this.addForm.saleAmt = this.addMainForm.salePric * Number(this.addMainForm.purcCnt); // 零售金额
			this.addMainForm.purcAmt = this.addMainForm.purcPric * Number(this.addMainForm.purcCnt)	 // 成本金额 =》 明细
			this.addMainForm.saleAmt = this.addMainForm.salePric * Number(this.addMainForm.purcCnt); // 零售金额 =》 明细
		},
		// 大小单位计算
		getMaxMin(drugInfos){
		},
		// 草稿保存 = > 只能先保存草稿
		async draftSubmit(){
			//触发验证表单
			this.$refs.addForm.validate(async(valid) => {
			if(valid){
			this.addForm.state = 0
			this.addForm.detailsVOS = this.tableData
			console.log(this.addForm);
			if(this.tableData.length === 0){
				this.$confirm('当前暂无【当前明细数据表】，请先添加至少一条明细数据！', '提示', {
					confirmButtonText: 'OK',
					cancelButtonText: '不调拨了',
					type: 'warning'
					}).then(() => {}).catch(() => {
						this.$message({ type: 'info', message: '已取消调拨'});
						this.addDialogVisible = false;
						this.$refs['addForm'].resetFields();
					});
				this.addMainForm.purcCnt = 1;
			}
			let result = await addpurctcmallocate(this.addForm)
				if (result.code === 200) {
					this.$message({ type: 'success', message: '西药药品调拨：已保存！！' });
					this.parentMethod(); // 更新数据驱动 => 父组件 shopPlan
					this.addDialogVisible = false;
				} else {
					this.$message.error(result.message)
				}
			}
			})
		},
		// 草稿修改
		draftEditSubmit(){
			//触发验证表单
			this.$refs.addForm.validate(async(valid) => {
			if(valid){
			this.addForm.state = 0
			this.addForm.detailsVOS = this.tableData
			console.log(this.addForm);
			if(this.tableData.length === 0){
				this.$confirm('当前暂无【当前明细数据表】，请先添加至少一条明细数据！', '提示', {
					confirmButtonText: 'OK',
					cancelButtonText: '不调拨了',
					type: 'warning'
					}).then(() => {}).catch(() => {
						this.$message({ type: 'info', message: '已取消调拨'});
						this.addDialogVisible = false;
						this.$refs['addForm'].resetFields();
					});
				this.addMainForm.purcCnt = 1;
			}
			let result = await editpurctcmallocate(this.addForm)
				if (result.code === 200) {
					this.$message({ type: 'success', message: '西药药品调拨：已保存！！' });
					this.parentMethod(); // 更新数据驱动 => 父组件 shopPlan
					this.addDialogVisible = false;
				} else {
					this.$message.error(result.message)
				}
			}
			})
		},
		// 父组件控制打开新增模态框
		open(parm) {
		  this.resetForm(); // 每次打开对话框时重置表单
		  
		  if(parm.nameTitle == '新增' || parm.nameTitle.includes('新增')) {
			this.nameTitle = '新增【中药】调拨明细';
			this.addDialogVisible = true;
			this.isAdd = true;
			this.isEdit = false;
		  } else if(parm.nameTitle == '修改' || parm.nameTitle.includes('修改')) {
			this.addDialogVisible = true;
			this.nameTitle = '修改【中药】调拨明细';
			this.isAdd = false;
			this.isEdit = true;
			this.getEdit(parm);
		  } else {
			this.$message.error('系统错误,请联系管理员!');
		  }
		},
		// 启用编辑状态
		    startEditing(row) {
		      // 保存原始数据
		      row.originalData = JSON.parse(JSON.stringify(row));
		      // 设置编辑状态
		      this.$set(row, 'editing', true);
		    },
		    
		    // 取消编辑
		    cancelEdit(row) {
		      // 恢复原始数据
		      if (row.originalData) {
		        Object.assign(row, row.originalData);
		      }
		      // 取消编辑状态
		      this.$set(row, 'editing', false);
		      delete row.originalData;
		    },
		    
		    // 保存编辑
		    async saveEdit(row) {
		      this.loading = true;
		      console.log(row,'rowrworworoworworowroworwor');
		      try {
		        // 验证输入数量
		        if (!row.apllyAmt || row.apllyAmt <= 0) {
		          this.$message.error('请输入有效的调拨数量！');
		          return;
		        }
		        
		        // 调用接口检查库存
		        const checkResult = await dpurctcmallocateJoin({ 
		          amount: row.apllyAmt,
		          invyId: this.addMainForm.invyId,
		          pacCnt: this.packNum,
		          purcType: this.purcType
		        });
		        
		        if (checkResult.code !== 200) {
		          this.$message.error(checkResult.message);
		          return;
		        }
		        
		        // 检查库存是否足够
		        if (row.apllyAmt > checkResult.data[0].purcCnt) {
		          this.$message.error('修改后的数量不能大于库存数量！');
		          return;
		        }
		        
		        // 更新金额
		        row.purcAmt = (row.purcPric * row.apllyAmt).toFixed(2);
		        row.saleAmt = (row.salePric * row.apllyAmt).toFixed(2);
		        
		        // 取消编辑状态
		        this.$set(row, 'editing', false);
		        delete row.originalData;
		        
		        // 重新计算总金额
		        this.calculateTotals();
		        
		        this.$message.success('保存成功！');
		      } catch (error) {
		        console.error('保存失败:', error);
		        this.$message.error('保存失败：' + (error.message || '未知错误'));
		      } finally {
		        this.loading = false;
		      }
		    },
		    
		    // 计算总金额
		    // calculateTotals() {
		    //   this.cbValue = this.tableData.reduce((sum, item) => {
		    //     return sum + (parseFloat(item.purcPric) * parseInt(item.apllyAmt));
		    //   }, 0).toFixed(2);
		      
		    //   this.lsValue = this.tableData.reduce((sum, item) => {
		    //     return sum + (parseFloat(item.salePric) * parseInt(item.apllyAmt));
		    //   }, 0).toFixed(2);
		      
		    //   // 更新表单中的总金额
		    //   this.addForm.costAmt = this.cbValue;
		    //   this.addForm.saleAmt = this.lsValue;
		    // },
		// 处理输入变化
		handleInputChange(row) {
		  // 重新计算总金额
		  this.cbValue = this.addForm.costAmt = row.purcAmt = row.purcPric * row.purcCnt;
		  this.lsValue = this.addForm.saleAmt = row.saleAmt = row.salePric * row.purcCnt;
		  // this.getTotalAmt();
		   // 重新计算总金额
		    this.calculateTotals();
		},
		// 修改回显数据
		async getEdit(parm) {
		  try {
			let res = await getDpurctcmallocate({id: parm.id });
			
			// 处理返回数据
			if (res.data.details) {
			  res.data.detailsVOS = res.data.details;
			  delete res.data.details;
			}
			
			// 确保detailsVOS存在
			if (!res.data.detailsVOS) {
			  res.data.detailsVOS = [];
			}
			
			this.addForm = res.data;
			this.tableData = [...res.data.detailsVOS];
			
			// 计算总金额
			this.calculateTotals();
		  } catch (error) {
			this.$message.error('获取编辑数据失败: ' + error.message);
		  }
		},
		// 根据选择的id去查找id对应的对象
		foundObj(){
			let rs = this.gysOption.find(name => name.id === val)
		},
		deleteRow(index, rows) {
		  rows.splice(index, 1);
		},
		handleSelectCost(val) {
		  this.addForm.nativePlace = val.join(',')
		},
		// db events
		// 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
		tableCellClassName({row, column, rowIndex, columnIndex}){
			row.index = rowIndex;
			column.index = columnIndex;
		},
		// 当input失去焦点的时候，隐藏input
		hideInput(){
		    this.currentCell = null;
		},
		// 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell  // 拼接后类似这样："1,0","1,1",
		dbclick(row,column) {
			console.log(column.index);
		},
		// db events
		handledbRow(row, column, event){
			if(row){ this.addForm = row; this.watchDialogVisible = true } else { console.log('fail'); }
			// console.log(this.addForm);
			this.formdisabled = true
		},
		// col 里面包含了表头字段和名称，list 是表格数据
		columnWidth(col, list) {
		  let prop = col.prop,lab = col.lab;
		  let width = 40; // 设定一个最小值
		  let maxlenStr = ""; // 最长字符串
		  for (let info of list) { if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop] }
		  width = Math.max(width, len(lab), len(maxlenStr));
		  // 表格自带的内边距(20px) 自调
		  return width + 24; // 这里加了 12px
		  function len(str) {
			// 实际分配长度可根据需要自行调整
			let length = 12;
			for (const char of str + "") {
			  // 英文小写字符 8px
			  if ("a" <= char && char <= "z") length += 8;
			  // 英文大写字符 8px
			  else if ("A" <= char && char <= "Z") length += 8;
			  // 中文字符 28px
			  else if (char >= "\u4e00" && char <= "\u9fa5") length += 28;
			  // 其他 8px
			  else length += 12;
			}
			return length;
		  }
		},
		// 内层
		innerColumnWidth(col, list){
			let prop = col.prop,lab = col.lab;
			let width = 28; // 设定一个最小值
			let maxlenStr = ""; // 最长字符串
			for (let info of list) { if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop] }
			width = Math.max(width, len(lab), len(maxlenStr));
			// 表格自带的内边距(20px) 自调
			return width + 24; // 这里加了 12px
			function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 12;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 22px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 22;
				  // 其他 8px
				  else length += 12;
				}
				return length;
			}
		},
		// 挂载或销毁前后重新赋值后端参数
		getAddForm(){
			// 左侧提交表单
			this.addForm = addForm.map(v => {return v })[0]; // Form
			this.addMainForm = this.addForm.detailsVOS[0];
			// 定义数据来源
			this.formType = AccType.map(function(val) { return val })
			this.formMainType = AccMainType.map(function(val) { return val })
			console.log(this.addForm,'原始的接口参数数据');
			// 解构赋值排除 list 属性 => 弃用
			// this.addHeadrForm = addForm.map(item => { let { list, ...newItem } = item; return newItem })[0];
		},
		//分页
		//每页条数改变触发
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pageNum = val;
			this.loadData();
		},
		//当前条数改变触发
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.pageNum = val;
			this.loadData();
		},
		// 关闭最小化未保存清空的表单
		minimizeDialog() {
			this.addDialogVisible = false;
			this.isMinimized = true;
		},
		// 打开最小化未保存清空的表单
		restoreDialog() {
			this.addDialogVisible = true;
			this.isMinimized = false;
		},
		// 新增方法：完全重置表单
		resetForm() {
		  // 重置表单验证
		  this.$refs.addForm && this.$refs.addForm.resetFields();
		  this.$refs.addMainForm && this.$refs.addMainForm.resetFields();
		  
		  // 重新初始化表单数据
		  this.initFormData();
		  
		  // 重置其他状态
		  this.isMinimized = false;
		  this.loading = false;
		},
		// 关闭
		handleClose(done) {
		  this.$confirm('确定要关闭对话框吗?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		  }).then(() => {
			this.resetForm();
			done();
		  }).catch(() => {
			// 取消关闭操作
		  });
		},
	},
	
}
</script>

<style lang="less" scoped>
	#optionItem {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: left;
		justify-content: space-around;
		span{
			padding-left: 8px;
			border: 1px solid #f1f1f1;
			display: inline-block;
			width: 128px;
			font-size: 12px;
			// height: 26px;
			// line-height: 26px;
			white-space: nowrap;      /* 禁止换行 */
			overflow: hidden;         /* 隐藏溢出内容 */
			text-overflow: ellipsis;  /* 溢出显示省略号 */
		}
	}
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: f8f8f8;
	/deep/ .el-dialog__header{
		padding: 4px;
		background-color: #007bb0;
	}
	/deep/ .el-input--mini .el-input__icon{
		line-height: 0;
	}
	/deep/ .el-dialog__title{
		color: #fff;
		font-size: 12px;
		line-height: 8px;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		position: absolute;
		top: -10px;
		right: 2px;
		color: #fff;
	}
	/deep/ .el-dialog__body{
		padding: 10px 20px;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
	}
	/deep/ .el-table .cell{
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	/deep/ .el-table th{
		background-color: #f1f1f1;
		border: none;
		color: #2d2d2d;
	}
    .addAcc{
		// self
		// 选项卡
		/deep/ .el-dialog__header{
			padding: 12px;
			background-color: #007bb0;
			height: 12px;
		}
		/deep/ .el-dialog__title{
			font-size: 12px;
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn{
			top: 10px;
		}
		/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
			margin-bottom: 6px;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
			background-color: brown;
		}
		.tabs{
			.tabsMain{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.table{
					width: 100%;
					margin-top: 12px;
				}
				.total{
					display: flex;
					height: 48px;
					align-items: center;
					span{
						font-size: 12px;
					}
				}
				// 第一层头部表单
				.headerForm{
					/deep/ .el-select> .el-input{
						// width: 118px;
					}
					/deep/ .el-input--mini .el-input__inner{
						height: 26px;
					}
					/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
						width: 100%;
					}
					border: 1px solid #EBEEF5;
					padding: 12px;
					/deep/ .el-form-item__label{
						display: flex;
						justify-content: start;
						font-size: 12px;
						width: 100%;
					}
				}
				// 第二层主体表单
				.mainForm{
					.input-with-select{
						/deep/ .el-select .el-input {
						    width: 108px;
						}
					}
					#optionItem {
						width: 100%;
						height: 100%;
						display: flex;
						font-size: 12px;
						align-items: center;
						text-align: center;
						justify-content: start;
						span{
							display: inline-block;
							width: 68px;
							height: 26px;
							line-height: 26px;
							white-space: nowrap;      /* 禁止换行 */
							overflow: hidden;         /* 隐藏溢出内容 */
							text-overflow: ellipsis;  /* 溢出显示省略号 */
						}
					}
					/deep/ .input-with-select .el-input-group__prepend {
					    background-color: #fff;
					}
					/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
						width: 100%;
					}
					/deep/ .el-input--mini .el-input__inner{
						height: 26px;
					}
					/deep/ .el-select> .el-input{
						// width: 110px;
					}
					/deep/ .el-form-item__label{
						display: flex;
						justify-content: center;
						font-size: 10px;
						padding: 0;
					}
					padding: 12px;
					margin-top: 8px;
					border: 1px solid #EBEEF5;
				}
			}	
		}
		.dialog-footer{
			display: flex;
			justify-content: right;
		}
	}
	.innerModel{
		.innerModel-header{
			display: flex;
			align-items: center;
		}
		.innerModel-table{
			
		}
	}
	
}
</style>